<template>
  <div>
    <div class="title">
      <h1>学生列表</h1>
      <el-button type="primary" icon="el-icon-plus" class="addStudent"  @click="dialogFormVisible=true,update=false"></el-button>
    </div>
    <el-dialog title="添加学生" :visible.sync="dialogFormVisible">
      <el-form :model="studentInfo">
        <el-form-item label="学生学号" :label-width="formLabelWidth">
          <el-input v-model="studentInfo.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="studentInfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="studentInfo.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth">
          <el-input v-model="studentInfo.department" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="studentInfo.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input v-model="studentInfo.classes" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="update" type="primary" @click="updateStudent(rowInfo)">确 定</el-button>
        <el-button v-else type="primary" @click="addStudent">确 定</el-button>
      </div>
    </el-dialog>
    <!--  放表格-->
    <el-table :data="studentForm"  border stripe>
      <el-table-column label="学号" prop="number" ></el-table-column>
      <el-table-column label="学生姓名"prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="学院"prop="department" ></el-table-column>
      <el-table-column label="家庭住址"prop= "address"></el-table-column>
      <el-table-column label="班级" prop="classes"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="dialogFormVisible=true,update=true,rowInfo=scope.row.id" icon="el-icon-edit" circle></el-button>
          <el-button type="danger" @click="deleteStudent(scope.row.id)" icon="el-icon-delete" circle></el-button>
          <el-button type="primary" @click="info(scope.row.id)" icon="el-icon-warning-outline" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<script>
import {baseUrl} from "@/api/config";

export default {
  data(){
    return {
      dialogFormVisible: false,
      studentForm: [],
      studentInfo: {
        id:'',
        number:'',
        name: '',
        sex: '',
        department: '',
        address: '',
        classes:'',
      },
      formLabelWidth: '180px',
      update:false,
      rowInfo:''
    }
  },
  mounted() {
    this.getStudents();
  },
  methods:{
    async getStudents() {
        this.studentForm = await axios.get(`${baseUrl}/students`)
            .then(function (response){
              console.log(response.data)
              return response.data.data
            })
            .catch(function (error){
              console.log(error)
              return false
            })
      return this.studentForm
    },
    async addStudent(){
      await this.axios.post(`${baseUrl}/student`,this.studentInfo).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getStudents()
    },
    async updateStudent(id){
      await this.axios.put(`${baseUrl}/student/${id}`,this.studentInfo).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getStudents()
    },
    async deleteStudent(id){
      await this.axios.delete(`${baseUrl}/student/${id}`).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getStudents()
    },
    info(id){
      this.$router.push({path:'/studentInfo',query:{id:id}})
    }
  }
}
</script>

<style lang ="less" scoped>
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>